<template>
	<div>
	<header class="w_search">
		<a href=""><input placeholder="搜索商品"></a>
	</header> 
	<nav class="w_nav">
		<a href="">上新</a>
		<a href="">女装</a>
		<a href="">鞋包</a>
		<a href="">母婴</a>
		<a href="">数码</a>
		<a href="">居家</a>
		<a href="">男士</a>
		<a href="">美妆</a>
		<a href="">美食</a>
		<a href="">精品配饰</a>
	</nav>
	<div class="w_main">
	<div class="w_banner">
		<img src="https://goods1.juancdn.com/jas/170818/0/d/5996dbfd8150a12fa1117c1d_1080x418.png?iopcmd=thumbnail&type=11&height=290&width=750%7Ciopcmd=convert&Q=80&dst=webp">
	</div>
	<div class="w_col_imglist">
		 <a href="">
		 	<img src="https://goods7.juancdn.com/jas/170809/d/a/598a7410a9fcf82db74d8e01_270x267.png?iopcmd=convert&Q=88&dst=webp">
		 </a>
		 <a href="">
		 	<img src="https://goods5.juancdn.com/jas/170816/9/9/5994336fa9fcf81cc96d0ab4_270x267.png?iopcmd=convert&Q=88&dst=webp">
		 </a>
		 <a href="">
		 	<img src="https://goods3.juancdn.com/jas/170809/4/1/598a743b8150a1268e7a6c3c_270x267.png?iopcmd=convert&Q=88&dst=webp">
		 </a>
		 <a href="">
		 	<img src="https://goods8.juancdn.com/jas/170809/e/8/598a7504a9fcf866ab51bcfe_270x267.png?imageMogr2/quality/88!/format/png">
		 </a>
	</div>
	<div class="space"></div>
	<div class="w_store">
		<div class="w_store_l">
		<a href="">
		<img src="https://goods5.juancdn.com/jas/170731/8/f/597ef0f18150a153db6be5ac_540x656.png?iopcmd=convert&Q=88&dst=webp">
		</a>
		</div>
		<div class="w_store_r">
		<a href="">
		<img src="https://goods8.juancdn.com/bao/170616/e/3/5943546fad0a49dc0c8b45d1_375x228.png?imageMogr2/quality/88!/format/png">
		</a>
		<a href="">
		<img src="https://goods7.juancdn.com/jas/170802/d/e/5981756fa9fcf8aa70325c6e_540x328.png?iopcmd=convert&Q=88&dst=webp">
		</a>
		</div>
	</div>
	<div class="space"></div>
	<div class="w_title">
		<img src="https://goods1.juancdn.com/bao/170310/0/f/58c20db7a43d1f63427015d8_750x96.jpg?iopcmd=convert&Q=88&dst=webp">
	</div>
	<div class="w_goods">
	<a href="">
	<div class="w_goods_title">
		<div>
			<img src="https://goods4.juancdn.com/bao/170327/7/7/58d86081a43d1f6e3528e4b4_180x90.png?imageMogr2/quality/88!/format/png">
		</div>
		<div>
			<p>小S.女装新品专场</p>
			<p>满2件减10元</p>
		</div>
		<div>
			<span>15.8万人已团</span>
		</div>
	</div>
	<div class="w_goodslist">
		<div>
			<img src="https://goods4.juancdn.com/bao/170804/6/3/5984043ba9fcf81eda160a72_800x800.jpg?imageMogr2/thumbnail/310x310!/quality/88!/format/jpg">
			<p><span>￥39</span><span>600</span></p>
			<p>时尚镂空拼接雪纺衫</p>
		</div>
		<div>
			<img src="https://goods2.juancdn.com/bao/170810/2/6/598bd3b38150a1124f724604_800x800.jpg?imageMogr2/thumbnail/310x310!/quality/88!/format/jpg">
			<p><span>￥39</span><span>600</span></p>
			<p>时尚镂空拼接雪纺衫</p>
		</div>
	</div>
	</a>
	<div class="space"></div>
	</div>
	<div class="space two">	
	</div>
	</div>
	</div>
</template>

<script>
	
</script>

<style scoped>
.w_search{
	width: 100%;
	height: 1.1733rem;
	line-height: 1.1733rem; 
	padding-left: 0.5973rem;
	padding-right: 1.87733rem; 
	color: #bbb;
	border-bottom: 1px solid #ddd;
}
.w_search input{
	width: 8.4537rem;
	height: 0.7467rem;
	background-color: #eee;
    border-radius: 0.17067rem;
    border:none;
    font-size:0.3733rem; 
	text-indent:0.5973rem;
	color: #999999;
}
.w_nav{
	height:1.0133rem;
	width: 100%;
	font-size: 0.3733rem; 
	white-space: nowrap;
    overflow-x: auto;

}
.w_nav a{
	display:inline-block;
	height:1.0133rem;
	line-height: 1.0133rem;
	width:1.0129rem; 
	padding: 0 .21333rem;
    margin: 0 .29867rem;
    background: #fff; 
}
.w_nav a:hover{
	color: #FF464E;
    border-bottom: 4px solid #ff464e;
}
.w_banner,.w_banner img{
	width: 100%;
	height:3.8667rem; 
}
.w_col_imglist{
	width:100%;
	height:2.4727rem;
	padding: 0;
	margin: 0; 
	display: flex;
	justify-content: space-around;
}
.w_col_imglist a{
	width:25%;
	height:100%; 
}
.w_col_imglist a img{
	width:2.5rem; 
	height:2.4721rem;
}
.space{
	width: 100%;
	height:.42667rem;
	background:#eee;
}
.w_store{
	width: 100%;
	height:6.074rem; 
	display: flex;
}
.w_store_l,.w_store_r{
	width: 5.0rem;
	height: 6.074rem;
}
.w_store_l a img{
	width: 5.0rem;
	height: 6.074rem;
}
.w_store_r a:first-of-type img,.w_store_r a:nth-of-type(2) img{
	width: 5.0rem;
	height: 3.0319rem;
}
.w_title{
	width: 100%;
	height:1.28rem;
}
.w_title img{
	width: 100%;
	height:1.28rem; 
}
.w_goods_title{
	width: 100%;
	height:1.4933rem; 
	padding: .42667rem .512rem;
	display:flex;
	font-size: .3733rem; 
	position: relative;
}
.w_goods_title div:first-of-type{
	width:0.96rem;
    height:0.96rem;
    margin-right: .34133rem;
    border: .02133rem solid #ebebeb;
    padding-top:0.2rem;
}
.w_goods_title div:first-of-type img{
	width:0.9333rem;
	height: 0.4533rem; 
}
.w_goods_title div:nth-of-type(2){
	font-size: .512rem;
}
.w_goods_title div:nth-of-type(2) p{
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size:0.32rem; 
}
.w_goods_title div:nth-of-type(2) p:nth-of-type(2){
	 color: #999;
}
.w_goods_title div:nth-of-type(3){
	color: #999;
	position: absolute;
    top: .42667rem;
    right: .512rem;
    height: 1.536rem;
}
.w_goods_title div:nth-of-type(3) span{
	display: inline-block;
    font-size:0.3733rem;
    margin-top:0.2rem; 
}
.w_goodslist{
	display: flex;
}
.w_goodslist div{
 	width:5.0rem;
 	height: 5.8931rem; 
}
.w_goodslist div img{
 	width: 4.36rem;
 	height: 4.36rem;
 	margin-left: auto;
 	margin-right: auto;
}
.w_goodslist div p{
	padding-left:.512rem; 
}
.w_goodslist div p:first-of-type{
	margin-top:0.08rem;
	margin-bottom: 0.0533rem; 
}
.w_goodslist div p:first-of-type span:first-of-type{
	color: #c00;
	margin-right:0.0667rem; 
}
.w_goodslist div p:first-of-type span:nth-of-type(2){
	font-size:0.24rem;
	text-decoration: line-through;
}
.two{
	width: 100%;
	height: 4rem;
	background:red; 
}	

</style>